<template>
  <div class="detail">
    <swiper class="swiper" 
			circular 
			:indicator-dots="indicatorDots" 
			:autoplay="autoplay" 
			:interval="interval"
			:duration="duration">
			<swiper-item v-for="(item,index) in banner" :key="index">
				<view class="swiper-item">
					<image :src="item.url" mode="aspectFill"></image>
				</view>
			</swiper-item>
		</swiper>
    <div class="self_means">
      <div class="self_top">
        <div class="self_name">
          <div class="selft_name_top">
            <div class="self_name_text">{{ '张三 ' }}</div>
            <div class="self_verify" >
              <span class="icon_verify iconfont icon-renzhengdunpaianquanbaozhangzhibao"></span>
              <span class="name">已实名</span>
            </div>
          </div>
          <div class="self_id">ID:312312321</div>
        </div>
        <div :class="['self_watch',isWatch?'watch_active':'']" @click="HandleWatch">
          <van-icon class="star_icon" name="star" />
          <div class="self_watch_text">关注</div>
        </div>
 
      </div>
      <div class="self_main">
        <div class="self_main_item">
          <van-icon class="self_main_item_icon" name="birthday-cake-o" />
          <span class="self_main_item_label">27岁.天蝎座</span>
        </div>
        <div class="self_main_item">
          <van-icon class="self_main_item_icon" name="calendar-o" />
          <span class="self_main_item_label">179cm.70kg</span>
        </div>
        <div class="self_main_item">
          <van-icon class="self_main_item_icon" name="medal-o" />
          <span class="self_main_item_label">本科</span>
        </div>
        <div class="self_main_item"> 
          <van-icon class="self_main_item_icon" name="hot-o" />
          <span class="self_main_item_label">医生</span>
        </div>
        <div class="self_main_item">
          <van-icon class="self_main_item_icon" name="location-o" />
          <span class="self_main_item_label">现居:周口市川汇区七一路街道</span>
        </div>
        <div class="self_main_item">
          <van-icon class="self_main_item_icon" name="guide-o" />
          <span class="self_main_item_label">户籍:周口市川汇区七一路街道</span>
        </div>
      </div>
    </div>
    <div class="martch_mark" v-if="recommond">
      <div class="martch_speak">
        按时打发还是发大水发射点发3维护
      </div>
      <div class="match_invok">—— 月老评语</div>
    </div>
    <van-divider contentPosition="center">单身汪</van-divider>
    <div class="detail_means">
      <div class="self_zl">
        <div class="self_title">Ta的详细资料</div>
        <div class="self_zl_detail">
          <van-icon class="detail_icon" name="service-o" />
          <span class="detail_content">月收入5千~1w</span>
          <span class="detail_content">有兄弟姐妹</span>
          <span class="detail_content">汉族</span>
        </div>
        <div class="self_zl_detail">
          <van-icon class="detail_icon" name="wap-home-o" />
          <span class="detail_content">婚后购房</span>
          <span class="detail_content">有辆豪车</span>
        </div>
        <div class="self_zl_detail">
          <van-icon class="detail_icon" name="shop-collect-o" />
          <span class="detail_content">未婚</span>
          <span class="detail_content">时机成熟结婚</span>
        </div>
      </div>
      <van-divider />
      <div class="self_characteristic">
        <div class="self_title">Ta的特点</div>
        <div class="characteristic_box">
          <div class="characteristic_item">真实靠谱</div>
          <div class="characteristic_item">贤惠股价</div>
          <div class="characteristic_item">温柔体贴</div>
          <div class="characteristic_item">接受异地恋</div>
          <div class="characteristic_item">接受姐弟恋</div>
          <div class="characteristic_item">听音乐</div>
        </div>
      </div>
      <van-divider />
      <div class="self_wash">
        <div class="self_title">Ta希望你</div>
        <div class="self_wash_box">
          <van-icon class="self_wash_icon" name="notes-o" />
          <div class="self_wash_cont">
            <div class="self_wash_text">18-37岁之间</div>
            <div class="self_wash_text">160cm以上</div>
            <div class="self_wash_text">不能接受小孩</div>
            <div class="self_wash_text">未婚</div>
          </div>  
        </div>
        <div class="self_wash_box">
          <van-icon class="self_wash_icon" name="flower-o" />
          <div class="self_wash_cont">
            <div class="self_wash_text">不冷暴力</div>
            <div class="self_wash_text">热心肠</div>
            <div class="self_wash_text">温柔体贴</div>
            <div class="self_wash_text">善良靠谱</div>
            <div class="self_wash_text">孝敬父母</div>
          </div>  
        </div>
      </div>
    </div>
    <div class="self_gift">
      <div class="self_title">送礼物 (<label>已收到0份礼物</label>)</div>
    </div>
    <div class="contact_Ta">
      <div class="contact_type_top">
        <div class="contact_type_text" @click="report">举报</div>
        <div class="contact_type_text" @click="block">拉黑</div>
      </div>
      <div class="contact_bot" @click="recommend">将Ta推荐给合适的朋友</div>
    </div>
    <div class="detail_contat">
      <div class="contact_free"><van-icon class="contact_icon" name="gift" /><label>送礼物</label></div>
      <div class="contact_free"><van-icon class="contact_icon" name="invitation" /><label>想认识Ta</label></div>
      <div class="contact_free"><van-icon class="contact_icon" name="service" /><label>月老牵线</label></div>
    </div>
  </div>
  <van-share-sheet
    :show="showShare"
    title="立即分享给好友"
    :options="shareMenu"
    @select="onSelect"
    @close="showShare=false"
  />
</template>

<script setup>
  import { onLoad } from "@dcloudio/uni-app"
  import {ref,reactive} from 'vue'
  const isScrollTop = ref(false);
  const indicatorDots = ref(false);
  const isWatch = ref(false);
  const autoplay = ref(false);
  const showShare = ref(false);
  const interval = ref('3000');
  const duration = ref('500');
  const options = reactive({})
  const banner = reactive([
    {url:'/static/txn.jpeg'},
		{url:'/static/txw.jpeg'},
  ])
  const shareMenu = reactive([
    { name: '微信', icon: 'wechat', openType: 'share' },
    { name: '复制链接', icon: 'link' },
    { name: '分享海报', icon: 'poster' },
    { name: '二维码', icon: 'qrcode' },
  ])
  const HandleWatch = ()=>{
    isWatch.value =!isWatch.value
  }
  const recommond = ref(false)
  const report = ()=>{
    uni.navigateTo({
      url:'/mysub/complaint/index'
    })
  };
  const block = ()=>{};
  // 分享
  const recommend = ()=>{
    console.log(111)
    showShare.value = true
  };
  const onSelect = e=>{
    const {name,index} = e.detail;
    uni.showToast({title:name})
  };
  onLoad(params=>{
		Object(options,params)
    console.log(params,'===params')
		recommond.value = JSON.parse(params.recommond || false)
	})
</script>

<style lang="scss" scoped>
.detail{
  padding:0 30rpx 100rpx;
  background-color: #f7f7f7;
  .swiper{
    margin:10rpx 0;
    height: 400rpx;
    .swiper-item{
      height: 100%;
      width: 100%;
      overflow: hidden;
      border-radius: 10rpx;
      image{
        width: 100%;
        height: 100%;
      }
    }
  }
  .self_means{
    margin-top: 20rpx;
    padding:30rpx;
    background-color: #fff;
    border-radius: 15rpx;
    .self_top{
      display: flex;
      justify-content: space-between;
      padding-bottom: 30rpx;
      border-bottom: 1px solid #ccc;
      .self_name{
        .selft_name_top{
          display: flex;
          align-items: center;
          .self_name_text{
            display: inline-block;
            font-size: 30rpx;
            color: #000;
            margin-right: 10rpx;
          }
          .self_verify{
            display: inline-block;
            border-radius: 15rpx;
            height: 30rpx;
            padding: 0 8rpx;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            font-size: 20rpx;
            background-color: #1c6ad7;
            color: #fff;
            .icon_verify{
              font-size: 20rpx;
            }
            .name{
              margin-left: 4rpx;
            }
          }
        }
        .self_id{
          margin-top: 10rpx;
          font-size: 28rpx;
        }

       
      }
      .self_watch{
        display: flex;
        align-items: center;
        flex-direction: column;
        .star_icon{
          color: #ccc;
        }
        .self_watch_text{
          margin-top: 8rpx;
        }
      } 
      .watch_active{
        color: #1c6ad7;
        .star_icon{
          color: #1c6ad7;
        }
      }
    }
    .self_main{
      padding:20rpx 10rpx;
      display: flex;
      flex-wrap: wrap;
      .self_main_item{
        width: 50%;
        font-size: 28rpx;
        margin-bottom: 20rpx;
        .self_main_item_icon{
          margin-right: 10rpx;
          color: #ccc;
        }
        &:nth-last-child(-n+2){
          width: 100%;
        }
      }
    }
  }
  .martch_mark{
    padding:30rpx;
    margin:20rpx 0;
    border-radius: 20rpx;
    background-color: #1c6ad763;
    position: relative;
    &::before{
      content: ' ';
      position: absolute;
      width: 40rpx;
      height: 40rpx;
      background: url('../images/zuoshuangyinhao-copy.png');
      background-size: contain;
      left: 20rpx;
      top: 0;
    }
    // &::after{
    //   content: ' ';
    //   position: absolute;
    //   width: 40rpx;
    //   height: 40rpx;
    //   background: url('../images/zuoshuangyinhao.png');
    //   background-size: contain;
    //   right: 20rpx;
    //   bottom: -10rpx;
    // }
    .martch_speak{
      font-size: 28rpx;
      color: #000;
      line-height: 40rpx;
      text-indent: 1rem;
    }
    .match_invok{
      margin-top: 10px;
      text-align: right;
      font-size: 28rpx;
      color: #1c6ad7;
    }
  }
  .detail_means{
    padding:30rpx;
    background-color: #fff;
    border-radius: 15rpx;
    margin-bottom: 20rpx;
    .self_title{
      padding-left: 20rpx;
      height: 35rpx;
      font-size: 30rpx;
      line-height: 35rpx;
      position: relative;
      margin-bottom: 20rpx;
      &::before{
        content:'';
        position: absolute;
        left: 0;
        height: 100%;
        width: 8rpx;
        border-radius: 8rpx;
        background-color: #1c6ad7;
      }
    }
    .self_zl_detail{
      font-size: 28rpx;
      margin-bottom: 20rpx;
      display: flex;
      .detail_icon{
        color: #ccc;
        margin-right: 20rpx;
        font-size: 28rpx;
      }
      .detail_content{
        display: inline-block;
        background-color: #eee;
        color: #000;
        height: 46rpx;
        line-height: 46rpx;
        font-size: 28rpx;
        padding:0 20rpx;
        border-radius: 40rpx;
        margin-right: 20rpx;
      }
    }
    .self_characteristic{
      .characteristic_box{
        display: flex;
        flex-wrap: wrap;
        .characteristic_item{
          display: flex;
          align-items: center;
          height: 46rpx;
          border-radius: 46rpx;
          padding:0 20rpx;
          border:1px solid #1c6ad7;
          color: #1c6ad7;
          font-size: 28rpx;
          margin-right: 20rpx;
          margin-bottom: 20rpx;
        }
      }
    }
    .self_wash{
      .self_wash_box{
        display: flex;
        align-items: flex-start;
        .self_wash_icon{
          font-size: 32rpx;
          margin-right: 40rpx;
          margin-top: 10rpx;
        }
        .self_wash_cont{
          display: flex;
          flex: 0 0 1;
          display: flex;
          flex-wrap: wrap;
          .self_wash_text{
            margin-bottom: 20rpx;
            margin-right: 20rpx;
            background-color: #eee;
            color: #000;
            height: 46rpx;
            line-height: 46rpx;
            font-size: 28rpx;
            padding:0 20rpx;
            border-radius: 40rpx;
            
          }
        }
      }
    }
    
    
  }
  .self_gift{
    padding:30rpx;
    background-color: #fff;
    border-radius: 15rpx;
    margin-bottom: 20rpx;
    .self_title{
      padding-left: 20rpx;
      height: 35rpx;
      font-size: 30rpx;
      line-height: 35rpx;
      position: relative;
      margin-bottom: 20rpx;
      &::before{
        content:'';
        position: absolute;
        left: 0;
        height: 100%;
        width: 8rpx;
        border-radius: 8rpx;
        background-color: #1c6ad7;
      }
      label{
        font-size: 24rpx;
      }
    }
  }
  .contact_Ta{
    background-color: #fff;
    border-radius: 15rpx;
    width: 100%;
    margin-bottom: 20rpx;
    .contact_type_top{
      display: flex;
      padding:10rpx 0;
      width: 100%;
      border-bottom: 1px solid #ccc;
    
      .contact_type_text{
        display: flex;
        align-items: center;
        justify-content:center;
        height: 70rpx;
        font-size: 36rpx;
        width: 50%;
        color: #ccc;
        &:first-child{
          border-right: 1px solid #ccc;
        }

      }
    }
    .contact_bot{
      display: flex;
      align-items: center;
      justify-content:center;
      height: 100rpx;
      font-size: 36rpx;
      color: #1c6ad7;
    }
  }
  .detail_contat{
    position: fixed;
    bottom: 20rpx;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-around;
    
    .contact_free{
      width: 200rpx;
      height: 70rpx;
      border-radius: 70rpx;
      font-size: 28rpx;
      background-color: #fff;
      display: flex;
      color: #FF6684;
      align-items: center;
      justify-content: center;
      border:1px solid #FF6684;
      .contact_icon{
        font-size: 32rpx;
        margin-right: 10rpx;
      }
      &:nth-child(2){
        background-color: #FF6684;
        color: #fff;
        border: 0;
      }
    }
  }
}
</style>